<template>
    <div class="box">
        <h3>组合式api的组件定义语法</h3>
        <ul>
            <li>组件定义:导入即为定义</li>
            <li>props的属性拦截定义：使用vue提供的组合式方法 defineProps(选项式props的取值) 完成 <br>
                在组合式语法下，其它JS方法如果需要调用拦截属性必须通过 defineProps 返回对象进行操作 <br>
                <pre>
                import { defineProps } from "vue";
                // let props = defineProps(["msg"])
                let props = defineProps({
                    msg:{
                        type:String,
                        default:""
                    }
                })
                let printMsg = function(){
                    // console.log( msg );
                    console.log( props )
                    console.log( props.msg )
                }
                </pre>
            </li>
            <li>emits的事件拦截定义：使用vue提供的组合式方法 defineEmits(选项式emits的取值) 完成 <br>
                在组合式语法下，其它JS方法如果需要调用拦截事件必须通过 defineEmits 返回事件触发函数完成
                <pre>
                let emit = defineEmits(["update:info"])
                let info = ref("子组件数据");
                let sendInfo = function(){
                    emit("update:info",info.value);
                }
                </pre>
            </li>
            <li>组件对外公开方法定义：使用vue提供 defineExpose() 方法完成 <br>
                为了保证组件可以完成多功能的导出，defineExpose 方法取值参数建议保持  Object 数据 
                <pre>
                let printTest = function(){
                    console.log("子组件的printTest方法")
                }
                defineExpose({
                    printTest
                })
                </pre>
            </li>
        </ul>
        <div>msg:{{ msg }}</div>
        <div>来自子组件info：{{ cinfo }}</div>
        <ChildOne :msg="msg" @update:info="updateInfo" ref="childComp"></ChildOne>
        <input type="button" value="访问子组件的printTest方法" @click="exChildFun()">
    </div>
</template>

<script setup>
import { ref } from "vue";
import ChildOne from "./components/ChildOne.vue";

let msg = ref("父组件变量");
let cinfo = ref("");
let updateInfo = function(nv){
    cinfo.value = nv;
}
let childComp = ref();
let exChildFun = function(){
    console.log(childComp.value);
    console.log(childComp.value.printTest);
    childComp.value.printTest();
}
</script>

<style lang="scss" scoped>

</style>